<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="/css/reset.css">
		<link rel="stylesheet" href="/css/userProfiles.css">
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="/js/common.js"></script>


		<script>
			$(function () {
                //获取共享过来的user字符串
                var userStr= sessionStorage.getItem("user")
                console.log(userStr);
                //解析这个字符串改为user对象
                var user=JSON.parse(userStr);

                var params = getParams();
                if (params.id){
                    $.get("/users/"+params.id,function (data) {
                        $(".info").renderValues(data);
                        //设置背景图,设置他的样式
                        $(".bg").css("background-image", "url('" + data.coverImgUrl + "')");

                        //根据状态来显示按钮
						if(user.id == params.id){
                            $("#followBtn").attr("style","display: none");
                            $("#cancelBtn").attr("style","display: none");
						}else{
                            if(data.state == 1){
                                $("#followBtn").attr("style","display: none");
                            } else if (data.state == 0){
                                $("#cancelBtn").attr("style","display: none");
                            }
						}
                    })
					//给私信绑定点击事件
					$("#letterBtn").click(function () {
                       var id= $(this).data("id")
						location.href="/mine/chatpage.html?informId="+id;
                    })


                    //给关注绑定点击事件
                    $("#followBtn").click(function () {
                        $.ajax({
                            url: "/users/"+params.id+"/author",
                            type: "PUT",
                            success: function () {
                                window.location.reload();
                            }
                        })
                    })

                    //给取关绑定点击事件
                    $("#cancelBtn").click(function () {
                        $.ajax({
                            url: "/users/"+params.id+"/author",
                            type: "PUT",
                            success: function () {
                                window.location.reload();
                            }
                        })
                    });

					//----------------------------------------------------
                    var currentPage = 1;
                    var totalPage = 1;
                    //因为要滚动分页加载,所以要编程一个数组
                    var dataList = [];

                    //第一次加载
                    $.get("/travel/" + params.id +"/author", {currentPage: currentPage, pageSize: 5}, function (data) {

                        //把他加到dataList数组中
                        $.merge(dataList, data.list);
                        console.log(data.list);
                        $("#travels").renderValues({list: dataList}, {
                            setHref: function (item, value) {
                                $(item).attr("href",$(item).attr("href") + value);
                            }
                        });
                        currentPage+=1;
                        totalPage=data.pages;
                    });
                    //屏幕滚动事件
                    $(window).scroll(function () {
                        if ($(window).height() + $(window).scrollTop() + 1>= $(document).height()) {
                            if (currentPage <= totalPage) {
                                $.get("/travel/" + params.id +"/author",{currentPage: currentPage, pageSize: 5}, function (data) {
                                    //合并数组,返回第一个数据,如[1,2]和[3]编程[1,2,3]
                                    $.merge(dataList, data.list)
                                    //数据渲染
                                    $("#travels").renderValues({list: dataList}, {
                                        setHref: function (item, value) {
                                            $(item).attr("href",$(item).attr("href") + value);
                                        }

                                    });
                                    currentPage += 1;
                                })
                            } else {
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: '亲,到底了',
                                    autoClose: 1500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                });
                            }
                        }
                    });
					//---------------------------------------------------------------------------
					//获得游记总数
					$.get("/travel/" + params.id +"/count",function (data) {
						$("#travels-tab").renderValues({count:data});
                    })

					//我的点评
					$("#comments-tab").click(function () {
						$.get("/strategyComments/getMyComments/"+params.id,function (data) {
                            $("#comments").renderValues({list:data},{
                                setHref: function (item, value) {
                                    $(item).attr("href",$(item).attr("href") + value);
                                }
                            });
                            console.log(data);

                            $.each(data,function (index, ele) {
                                //console.log(ele.starNum);
                                var htmls="";
                                for (var i = 1; i <= ele.starNum; i++) {
                                    htmls += "<i class='fa fa-star'></i>";
                                }
                                $($(".comment-star")[index]).append(htmls);
                            });
                        })
                    })

					$.get("/strategyComments/count",{id:params.id},function (data) {
                        console.log(data);
                        $("#comments-tab").renderValues({count:data});
                    })
                }
            })

		</script>

	</head>
	<body>
		<div class="container bg">
			<a href="javascript:window.history.go(-1)" class="my-arrow">
				<span><i class="fa fa-chevron-left fa-2x"></i></span>
			</a>
			<div class="container">
				<div class="info">
					<img class="rounded-circle" width="17%" render-src="headImgUrl">
					<p class="name" render-html="nickName"></p>
					<p render-html="sign"></p>

					<div class="row num">
						<div class="col-2 border border-left-0 border-top-0 border-bottom-0">
							<div>
								<span render-html="attention"></span>
							</div>
							<div>
								<span>关注</span>
							</div>
						</div>
						<div class="col-2">
							<div>
								<span render-html="fans"></span>
									</div>
							<div>
								<span>粉丝</span>
							</div>
						</div>
						<div class="col">
							<button class="btn btn-outline-light ibtn" id="letterBtn" render-attr="data-id=id">私信</button>
							<button class="btn btn-success ibtn" id="followBtn">+ 关注</button>
							<button class="btn btn-outline-light ibtn" id="cancelBtn">已关注</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="tabs">
			<ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
				<li class="nav-item">
					<a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
						TA的游记[<span render-html="count"></span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
						TA的点评[<span>1</span>]
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact">
						TA的旅行单[<span>0</span>]
					</a>
				</li>
			</ul>
			<div class="container tab-content" id="pills-tabContent">
				<div class="tab-pane fade show active" id="travels">
						
						<dl class="list" render-loop="list">
							<dd>
								<a href="travelContent.html?id=" render-fun="setHref" render-key="list.id">
									<img width="17%" render-src="list.coverUrl">
									<p><span class="title" render-html="list.title"></span>
										<span class="span-right">
						 				<span >0</span>
											<i class="fa fa-thumbs-o-up"></i>
										</span>
									</p>
								</a>
								<hr>
							</dd>
						</dl>
				</div>

				<div class="comment tab-pane fade " id="comments">
					<input type="hidden" name="currentPage" value="1">
					<input type="hidden" name="pageSize" value="5">
					<input type="hidden" name="rows" value="1">
					<div><div class="row">
							<div class="col-2 comment-head">
								<img  class="rounded-circle" src="/upload/7e854d1d-a7be-4360-8943-8771d18ee0e3.jpg">
							</div>
							<div class="col">
								<span class="comment-star" ><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span>

								<span class="comment-date" >2018-07-11</span>
								<div class="comment-content">
									<a href="strategyComment.html"  data-id="4">
										<p >骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕...</p>
									</a>
								</div>
								<ul class="comment-img"><li>
										<img  src="/upload/63bb765d-5dff-44f8-b7f1-cb338b9b9f95.jpeg">
									</li><li>
										<img  src="/upload/7d437f8d-a476-465c-bd84-e93a03d8efd5.jpeg">
									</li></ul>

								<div class="comment-link">
									<a href="strategyCatalogs.html" data-id="2">
										<img  src="/upload/e5e8a1a7-b127-4145-9fd0-a94e29f752ba.jpeg"> <span >广州攻略</span>
										<i class="fa fa-angle-right fa-2x"></i>
									</a>
								</div>

							</div>
						</div></div>

				</div>
				<div class="tab-pane fade" id="pills-contact">.3333..</div>
			</div>
		</div>

</body>
</html>